<template>
  <div class="app-container">
    <el-row class="roleInputRow">
      <el-col :span="18">
        <div id="Josh" style="width: 1100px; height: 350px"></div>
        <div id="scatter" style="width: 1100px; height: 350px"></div>
      </el-col>

      <el-form
        ref="requestForm"
        :inline="false"
        class="right-condition"
        :model="requestForm"
        label-width="120px"
      >
        <el-col :span="6">
          <el-form-item label="请选择设备:">
            <el-select
              v-model="selected"
              style="width: 220px"
              @change="getTraceData($event)"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.imei + item.create_dt"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="起始频率:" prop="startUnit">
            <el-input
              v-model="formItem.startUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="终止频率:" prop="endUnit">
            <el-input
              v-model="formItem.endUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="步进:" prop="step">
            <el-select v-model="formItem.step" style="width: 220px">
              <el-option
                v-for="item in stepList"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
// import * as Echarts from 'echarts/lib/echarts'
export default {
  name: 'Josh',
  data: () => {
    return {
      requestForm: {},
      formItem: {
        startUnit: '',
        endUnit: '',
        step: '',
      },
      selected: '',
      list: [],
      orgOptions: {},
      scatterOptions: {},
      stepList: [
        {
          id: 25,
          val: '25kHz',
        },
        {
          id: 50,
          val: '50kHz',
        },
        {
          id: 100,
          val: '100kHz',
        },
      ],
      freqUnit: 'Mhz',
    }
  },
  mounted () {
    const baseUrl = 'http://47.118.20.181:8080'
    // const baseUrl = 'http://localhost:8081'
    axios.get(`${baseUrl}/josh/devices`).then(response => {
      console.log(JSON.stringify(response))
      this.list = response.data.data
      this.selected = this.list[0].id
      this.getTraceData(this.selected)
    }
    )
  },
  methods: {
    getTraceData: function (deviceId) {
      let myChart = this.$echarts.init(document.getElementById('Josh'))
      myChart.showLoading({
        text: '加载中...请稍后',
        color: '#47B485',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
      })
      const baseUrl = 'http://47.118.20.181:8080'
      axios.get(`${baseUrl}/josh/records?device_id=` + deviceId).then(
        function (response) {
          // console.log(JSON.stringify(response))
          if (response.data.status == 'success') {
            let [x, y, remarks] = onRecords(response.data.data[0])
            let { frequency, span, unit, ref, mr } = remarks
            this.orgOptions = {
              title: {
                text: '卓晟虚拟接收机',
                left: 'center',
              },
              // backgroundColor: 'black',
              // darkMode: true,
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                show: true,
                data: ['场强'],
                left: 'left',
                formatter: function (name) {
                  return name + '(' + unit + ')'
                },
              },
              xAxis: {
                data: x,
                axisLabel: {
                  formatter: function (value, index) {
                    return value + 'MHz'
                  },
                },
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  name: '场强',
                  type: 'line',
                  data: y,
                },
              ],
              dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                  type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                  start: 0,      // 左边在 10% 的位置。
                  end: 100         // 右边在 60% 的位置。
                }
              ],
            }
            myChart.hideLoading()
            myChart.setOption(this.orgOptions)

            let scatterData = []
            for (let index in x) {
              // console.log(index)
              let item = []
              item.push(x[index])
              item.push(y[index])
              scatterData.push(item)
            }

            let maxVal = Math.max.apply(null, y)
            let minVal = Math.min.apply(null, y)

            this.scatterOptions = {
              title: {
                text: '',
                left: 'center',
                top: 0,
              },
              visualMap: {
                min: minVal,
                max: maxVal,
                dimension: 1,
                orient: 'vertical',
                right: 10,
                top: 'center',
                text: ['强', '弱'],
                calculable: true,
                inRange: {
                  color: ['#f2c31a', '#24b7f2'],
                },
              },
              tooltip: {
                trigger: 'item',
                axisPointer: {
                  type: 'cross',
                },
              },
              xAxis: [
                {
                  type: 'value',
                  axisLabel: {
                    formatter: function (value, index) {
                      return value + 'MHz'
                    },
                  },
                },
              ],
              yAxis: [
                {
                  type: 'value',
                },
              ],
              series: [
                {
                  name: '场强',
                  type: 'scatter',
                  symbolSize: 5,
                  // itemStyle: {
                  //     normal: {
                  //         borderWidth: 0.2,
                  //         borderColor: '#fff'
                  //     }
                  // },
                  data: scatterData,
                },
              ],
              dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                  type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                  start: 0,      // 左边在 10% 的位置。
                  end: 100         // 右边在 60% 的位置。
                }
              ],
            }
            let scatterChart = this.$echarts.init(
              document.getElementById('scatter')
            )
            scatterChart.setOption(this.scatterOptions)
          } else {
            console.log(`get data for ${deviceId} failed`)
          }
        }.bind(this)
      )
    },
  },
}
// eslint-disable-next-line no-unused-vars
function onRecords (_data) {
  // eslint-disable-next-line no-unused-vars
  let { measure_dt, traces, remarks } = _data
  console.log(JSON.stringify(remarks))
  // eslint-disable-next-line no-unused-vars
  let { frequency, span, unit, ref, mr } = remarks
  let startFreq = frequency - span / 2
  let trace = traces[0].trace
  let pointCount = trace.length

  let step = span / pointCount
  console.log(`step ${step}`)
  let freqPoint = []
  for (let i = 0; i < pointCount; i++) {
    freqPoint.push(parseInt((startFreq + i * step) / 1000000))
  }
  return [freqPoint, trace, remarks]
}
</script>
<style scoped>
.right-condition {
  margin-top: 4rem;
}
</style>
